import React, { useState, useEffect } from 'react'
import { useParams } from 'umi'
import CommonHead from '@c/CommonHead'
import { fetchItemDetail } from '@a/index'
import { Swiper } from 'antd-mobile'
import './style.scss'
export default function index() {
  const [title, setTitle] = useState("详情页");
  const { id } = useParams();
  // 请求商品详情页
  const [basicInfo, setBasicInfo] = useState({});
  const [pics, setPics] = useState([]);
  const [content, setContent] = useState('');
  // 商品规格
  const [sku, setSku] = useState({});
  const getDetail = () => {
    fetchItemDetail(id).then(res => {
      console.log(res);
      if (res.data.code === 0) {
        const { basicInfo, pics, content } = res.data.data;
        setTitle(basicInfo.name)
        setBasicInfo(basicInfo);
        setPics(pics);
        setContent(content.replace(/<img/gi, '<img style="width: 100%;display:block"'));
        setSku({
          ...basicInfo,
          number: 1
        })
      }

    })
  }
  useEffect(() => {
    getDetail()
  }, [])
  return (
    <div>
      <CommonHead title={title} />
      <div className="detail-container">
        {/* 轮播 */}
        <Swiper
          autoplay
          loop
        >
          {
            pics.map(banner => (
              <Swiper.Item key={banner.id}>
                <img src={banner.pic} />
              </Swiper.Item>
            ))
          }
        </Swiper>
        {/* /轮播 */}
        <h4>
          {basicInfo.name}
        </h4>
        <div className='content' dangerouslySetInnerHTML={{__html: content}}></div>
      </div>
    </div>
  )
}
